/**
 * @Author:
 * @Date:
 * @Project: Govern督办
 * @Last
 * @Last
 */



import React from 'react';
import { observer } from 'mobx-react';
import { WeaLocaleProvider, WeaAuth, WeaDialog, WeaRichText } from 'ecCom';
import { Row, Col, Button, Slider } from 'antd';
import FormBottom from './FormBottom'
import { Condition } from '../list/listCondition';
import Dict from '../dialog/wea-comment-dict';
import { routerShape } from 'react-router';
import BtnType from '../../../util/btnType';
import * as Util from '../../../util/index'
import Normal from './normal.js';
import CubeLayout from '../cubeLayout';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;
const mirror = Dict.bottomBarMirror;

@observer
export default class Model extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
        this.state = {
            ctrlHeight: 600,
            scrollTop: 0,
        }
    }

    componentDidMount() {
    }
    componentWillUpdate(newProps) {
    }
    componentWillReceiveProps(newProps) {
    }

    getMarks = () => {
        const marks = {
            0: '0%',
            10: '10%',
            20: '20%',
            30: '30%',
            40: '40%',
            50: '50%',
            60: '60%',
            70: '70%',
            80: '80%',
            90: '90%',
            100: {
                style: {
                    color: 'rgb(135, 208, 104)',
                },
                label: <strong>100%</strong>,
            },
        };
        return marks
    }

    //解析字段时回调  传入字段的id（field-111）等及相关信息
    getEcmeFieldData = (path, param) => {
        const { cubeLayoutParame,percent } = this.props.contentStore.modelStore;
        const { specialFields } = cubeLayoutParame
        
        if (_.has(specialFields, path)) {
            if (specialFields[path].fieldname == 'progress') {
                let progressValue =param.isEdit?percent:param.value;
                let specialComponent = <div style={{ width: "60%" }}>
                    <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@1pi8yv`} marks={this.getMarks()} step={1} value={progressValue} onChange={(v) => { this.changeHandle(v, 'progress') }} />
                </div>
                return specialComponent;
            }
        }
        return null;
    }

    render() {
        //const { shareStore } = this.props.contentStore;
        const { modelType, id } = this.props;
        const { visible, btnvisible, shareStore, cubeLayoutParame, getCardStorefun = () => { return null },loading } = this.props.contentStore.modelStore;
        const { showAdd, shareCondition } = shareStore;
        const renderAgain = Math.random();
        let btndisable = (modelType == BtnType.BTN_CHANGE&&loading);
        let buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lhgg2r@$cancel`} type="ghost" onClick={() => { this.props.contentStore.modelStore.handleShareDialog(false) }}>{getLabel(201, "取消")}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h69fqt@submit`} type="primary" onClick={this.subBtn.bind(this, id)} disabled ={btndisable}>{getLabel(615, "提交")}</Button>)
        ]
        let clientWidth = document.documentElement.clientWidth;
        let clientHeight = document.documentElement.clientHeight;

        let cubeFlag = Object.keys(cubeLayoutParame).length > 0;

        let scroHeight = cubeFlag ? (clientHeight - 130) * 0.85 : clientHeight * 0.95;
        let scroWidth = cubeFlag ? (clientWidth + 15) * 0.7 : (clientWidth) * 0.7

        return (
            <div className="Db-model">
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8utkr9`}
                    onCancel={() => { this.props.contentStore.modelStore.handleShareDialog(false) }}
                    title={typeof BtnType[modelType] === "function" ? BtnType[modelType]() : BtnType[modelType]}
                    visible={visible}
                    style={{ width: scroWidth, height: scroHeight }}
                    hasScroll={!cubeFlag}
                    buttons={btnvisible ? buttons : []}
                    icon="icon-coms-government"
                    iconBgcolor="#f14a2d"
                >
                    <div>
                        {
                            (modelType != BtnType.BTN_INSTRUCT && modelType != BtnType.BTN_CREATE)&&cubeFlag ? CubeLayout({ cubeLayoutParame, "getEcmeFieldData": this.getEcmeFieldData, getCardStorefun,renderAgain }) :
                                <Normal ecId={`${this && this.props && this.props.ecId || ''}_Normal@dq0m6x`}
                                    modelType={modelType}
                                    store={this.props.contentStore.modelStore}
                                    btnAddClick={this.btnAddClick.bind(this, -1)}
                                    marks={this.getMarks()}
                                    changeHandle={this.changeHandle}
                                />
                        }
                    </div>
                </WeaDialog>
                <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@ggxv4f`}
                    visible={showAdd}
                    conditions={shareCondition}
                    title={getLabel('18645', '添加共享')}
                    onOk={v => {
                        this.props.contentStore.modelStore.addShare(v);
                    }}
                    onCancel={() => {
                        shareStore.onShowAdd(false)
                    }}
                    icon="icon-coms-government"
                    iconBgcolor="#f14a2d"
                />
            </div>
        )
    }
    btnAddClick = (index) => {
        const { btnAddClick } = this.props.contentStore.modelStore;
        btnAddClick(index);
    }
    onScroll(e) {
        this.setState({ scrollTop: e.target.scrollTop })
    }
    subBtn(id) {
        const { pathname, search, routepath = "" } = this.props;
        this.props.contentStore.modelStore.weaRichRef && this.props.contentStore.modelStore.changeRichText(this.props.contentStore.modelStore.weaRichRef.getData());
        this.props.contentStore.modelStore.subBtn(this.props.modelType, id, routepath);

        //lusx 详情页面，弹框保存后页面不刷新 19.1.30
        const {cubeLayoutParame } = this.props.contentStore.modelStore;
        if(Object.keys(cubeLayoutParame).length <= 0) {
            this.context.router.push({
                pathname: `/${pathname}${search}`
            });
        }
    }
    changeHandle = (v, fieldid) => {
        const { setSlider, specialField } = this.props.contentStore.modelStore;
        setSlider(v);
        if (fieldid) {
            specialField[fieldid]=v;
           // console.log("specialField",specialField);
        }
    }

}
